<template>
  <material-card color="primary">
    <template #title>
      <small class="text-body-1">{{ lanChar.status.HardWareResourceTitile }}</small>
    </template>
    <v-row>
      <v-col
        cols="12"
        md="2"
      >
        <v-alert
          :type="alertType"
          dense
        >
          {{ info }}
        </v-alert>
        <v-divider />
        <span class="mr-12">{{ lanChar.status.HardWareCPUTitle }}:</span><i>{{ cpu }}%</i><br>
        <span class="mr-12">{{ lanChar.status.HardWareMemTitle }}:</span><i>{{ mem }}%</i><br>
        <span class="mr-12">{{ lanChar.status.HardWareHDskTitle }}:</span><i>{{ dsk }}%</i><br>
      </v-col>
      <v-col
        cols="12"
        md="1"
      >
        <p />
      </v-col>
      <v-col
        cols="12"
        md="9"
      >
        <v-row>
          <v-col
            cols="12"
            md="4"
          >
            <chart-x
              v-model="xCpu"
              name="cpu-load-container"
              :title="lanChar.status.HardloadGraphTitleCPU"
            />
          </v-col>
          <v-col
            cols="12"
            md="4"
          >
            <chart-x
              v-model="xMem"
              name="mem-load-container"
              :title="lanChar.status.HardloadGraphTitleMem"
            />
          </v-col>
          <v-col
            cols="12"
            md="3"
          >
            <progress-x
              v-model="dsk"
              :title="lanChar.status.HardloadGraphTitleDsk"
              :scale-size="130"
              :stroke-width="30"
            />
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </material-card>
</template>

<script>
  import globalDef from '@/util/globals'
  import ChartX from './chart/ChartX'
  import ProgressX from './chart/ProgressX.vue'
  import * as mcAxios from '@/util/mcaxios'
  import lan from '@/util/lan-char'

  export default {
    name: 'HardLoadInfo',
    components: {
      'chart-x': ChartX,
      'progress-x': ProgressX,
    },
    data: () => ({
      lanChar: lan.GetLan(),

      updateTimer: 0,
      xCpu: [
        { xLabel: '', yLabel: 0 },
      ],
      xMem: [
        { xLabel: '', yLabel: 0 },
      ],
      xDsk: 0,
      // s: '负载正常',
    }),
    computed: {
      cpu () {
        return this.xCpu.at(-1).yLabel.toFixed(2)
      },
      mem () {
        return this.xMem.at(-1).yLabel.toFixed(2)
      },
      dsk () {
        return Number(this.xDsk.toFixed(2))
      },
      info () {
        if (this.cpu > 90 || this.mem > 95 || this.dsk > 95) {
          return '负载接近饱和'
        } else {
          return '负载正常'
        }
      },
      alertType () {
        if (this.info === '负载接近饱和') {
          return 'warning'
        } else {
          return 'success'
        }
      },
    },
    created () {
      this.startReflash()
    },
    mounted () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
      })

      this.getXHardload()
    },
    beforeDestroy () {
      clearInterval(this.updateTimer)
    },
    methods: {
      dataRec (xV, v) {
        if (xV.length > 50) {
          xV.shift()
        }
        xV.push({
          xLabel: new Date().toLocaleTimeString(),
          yLabel: v,
        })
      },
      dataLoad (xV, v, t) {
        if (xV.length > 50) {
          xV.shift()
        }
        xV.push({
          xLabel: new Date(t).toLocaleTimeString(),
          yLabel: v,
        })
      },
      getHardwareLoad () {
        const data = {
          request_type: 'hardware load',
          instance_id: 'instance_id',
          sequence_no: 1000,
        }
        mcAxios.axiosGetHardwareLoad(data)
          .then((res) => {
            if (res.data.status === true) {
              this.dataRec(this.xCpu, res.data.data.cpu_load)
              this.dataRec(this.xMem, res.data.data.mem_load)
              this.xDsk = Number(res.data.data.hd_load)
            } else {
              console.log('getHardwareLoad response fail')
            }
          })
          .catch((e) => {
            console.log('getHardwareLoad request fail: ', e)
          })
      },
      getXHardload () {
        const data = {
          request_type: 'hardload x',
          instance_id: 'instance_id',
          sequence_no: 1000,
        }
        mcAxios.axiosGetHardwareLoad(data)
          .then((res) => {
            if (res.data.status === true) {
              res.data.data.Cpuload.forEach(e => {
                this.dataLoad(this.xCpu, e.Load, e.Time)
              })
              res.data.data.Memload.forEach(e => {
                this.dataLoad(this.xMem, e.Load, e.Time)
              })
              this.xDsk = Number(res.data.data.Dskload.Load)
            } else {
              console.log('getXHardload response fail')
            }
          })
          .catch((e) => {
            console.log('getXHardload request fail: ', e)
          })
      },
      getHardload () {
        const data = {
          request_type: 'hardload',
          instance_id: 'instance_id',
          sequence_no: 1000,
        }
        mcAxios.axiosGetHardwareLoad(data)
          .then((res) => {
            if (res.data.status === true) {
              this.dataLoad(this.xCpu, res.data.data.Cpuload.Load, res.data.data.Cpuload.Time)
              this.dataLoad(this.xMem, res.data.data.Memload.Load, res.data.data.Memload.Time)
              this.xDsk = Number(res.data.data.Dskload.Load)
            } else {
              console.log('getHardload response fail')
            }
          })
          .catch((e) => {
            console.log('getHardload request fail: ', e)
          })
      },
      startReflash () {
        clearInterval(this.updateTimer)
        this.updateTimer = setInterval(this.getHardload, 2000)
      },
    },
  }
</script>
